<template>
  <div class="dynamicChart">
    <div class="btnBox">
      <template v-for="(item, idx) in btnList">
        <el-button :key="idx" :class="{ active: isActive == idx }" size="small" @click="setChartData(item.value, idx)">
          {{ item.label }}
        </el-button>
      </template>
    </div>
    <div id="dynamic" class="echarts"></div>
  </div>
</template>

<script>
export default {
  name: "dynamicChart",
  components: {},
  props: {},
  data() {
    return {
      isActive: 0,
      btnList: [
        { label: '10天', value: 10 },
        { label: '30天', value: 30 },
        { label: '60天', value: 60 },
        { label: '180天', value: 180 },
      ],
      date: [],
      price: [],
      chartData: {
        date: [],
        price: []
      }
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.mockData();
    this.$nextTick().then(() => {
      this.setChartData(10, 0);
    })
  },
  methods: {
    // 获取数据
    mockData() {
      let base = +new Date('2019/1/1');
      let oneDay = 24 * 3600 * 1000;
      let date = [];
      let data = [];
      let len = Math.ceil((+new Date() - base) / oneDay);
      for (let i = 0; i < len; i++) {
        let item = new Date(base)
        base += oneDay
        date.push(
          item.getFullYear() +
          '/' +
          (item.getMonth() + 1) +
          '/' +
          item.getDate()
        )
        data.push(Math.floor(Math.random() * (1000 - 500 + 1) + 500))
      }
      this.date = date;
      this.price = data;
    },
    // 切换数据
    setChartData(num, idx) {
      this.isActive = idx;
      let len = this.date.length;
      this.chartData.date = this.date.slice(len - num);
      this.chartData.price = this.price.slice(len - num);
      this.getDynamic();
    },
    // 获取图表
    getDynamic() {
      let chartDom = document.getElementById("dynamic");
      let chart = this.$echarts.init(chartDom);
      let option = {
        title: {
          text: '商品价格变动图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              background: '#6a7985'
            }
          }
        },
        grid: {
          left: '20',
          right: '20',
          bottom: '3',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.chartData.date
          }
        ],
        yAxis: [
          {
            type: 'value',
            boundaryGap: [0, '100%']
          }
        ],
        series: [
          {
            name: '商品价格',
            type: 'line',
            areaStyle: {
              color: '#55a8fd',
              opacity: 0.3
            },
            itemStyle: {
              color: '#55a8fd'
            },
            lineStyle: {
              color: '#55a8fd'
            },
            smooth: true,
            data: this.chartData.price,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }
        ]
      }
      chart.setOption(option);
    }
  },
}
</script>

<style lang="scss" scoped>
.dynamicChart {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #fff;

  .btnBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
  }

  .active {
    color: #3a8ee6;
    background: #ddeeff;
  }

  .echarts {
    width: 100%;
    height: calc(100% - 40px);
  }
}
</style>